<template>
	<view class="leave">
		<view class="main">
				<view class="li" v-for="(item,index) in leaveRecord" :key="item.id" @click='view(index)'>
					<!-- {{ item }} -->
					<view class="title">
						我的{{ item.leaveType == 0 ? '事假':'病假' }}申请
					</view>
					<view class="time">
						请假时间：{{ item.start }} -- {{ item.end }}
					</view>
					<view class="type"
						:style="{'color': item.type == 0 ? '#67C23A': item.type == 1 ? '#409EFF':'#F56C6C'  }">
						审批状态： {{item.type == 0 ? '审批中': item.type == 1 ? '通过':'驳回'}}
					</view>
				</view>

		</view>
		<view class="bottom" @click="leave">
			我要请假
		</view>
	</view>
</template>

<script>
	import { getTime } from '@/utils/utils.js'
	import {
		lookApprover,
		getLeave
	} from '@/api/leave.js'
	export default {
		data() {
			return {
				userInfo: null,
				pic: null,
				leaveRecord: [],
				scrollTop: 0
			};
		},
		onShow() {
			this.init()
		},
		methods: {
			async init() {
				this.userInfo = JSON.parse(uni.getStorageSync('userInfo'))
				this.attendanceInfo = JSON.parse(uni.getStorageSync('attendanceInfo'))
				this.pic = this.userInfo.name.slice(this.userInfo.name.length - 2, this.userInfo.name.length)
				const data = {
					id: this.userInfo.id
				}
				const res = await getLeave(data)
				if (res.status == 0) {
					this.leaveRecord = res.data
				}
				this.leaveRecord.forEach(item => {
					item.start = getTime(item.startTime)
					item.end = getTime(item.endTime)
				})
			},
			examine() {
				// 查看请假规则
			},
			change() {

			},
	
			leave() {
				uni.navigateTo({
					url:'/pages/apply/apply'
				})
			},
			view(index) {
				const item = this.leaveRecord[index]
				uni.setStorageSync('leaveInfo',item)
				uni.navigateTo({
					url:'/pages/leaveInfo/leaveInfo' 
				})
			}
		}
	}
</script>

<style lang="less">
	.leave {
		padding: 20rpx;
		position: relative;

		.nav {
			text-align: center;
			width: 100%;
			font-size: 40rpx;
			color: red;
			height: 5%;
			position: fixed;
			top: 88rpx;
			left: 0;
			background-color: #ffffff;
			z-index: 99;
		}

		.main {
			margin-bottom: 100rpx;
				.li {
					height: 200rpx;
					border: 1rpx solid #d5d5d5;
					margin-bottom: 20rpx;
					padding: 10rpx;
					
				}
			
		}

		.bottom {
			position: fixed;
			font-size: 30rpx;
			bottom: 100rpx;
			left: 0;
			text-align: center;
			width: 100%;
			height: 100rpx;
			padding: 0 !important;
			background-color: blue;
			color: #ffffff;
			line-height: 100rpx;
		}

	}
</style>
